<template>
  <view class="page">
  <view class="cu-bar fixed" :style="{ height: CustomBar + 'px', paddingTop: StatusBar + 'px' }">
      <view class="action" @tap="back()"><text class="cuIcon-back"></text></view>

      <view class="content" :style="[{ top: StatusBar + 'px' }]">{{i18n['信息审核']}}</view>
    </view>
    <view class="result-info text-center bg-white text-df" :style="{ marginTop: CustomBar + 'px' }">
      <view class="result-info-title text-lg">
        <view class="flex flex-direction justify-center align-center check-box" v-if="info.joinin_state == 1">
          <text class=" text-bold">审核中</text>
        </view>
		<view class="flex flex-direction justify-center align-center check-box" v-if="info.joinin_state == 2">
		  <text class=" text-bold"> {{i18n['审核通过']}}</text>
		  <!-- <view class="text-666" style="font-size: 24rpx;margin-top: 24rpx;width: 524rpx;">平台会在1-3个工作日内将商家后台的账号密码以短信的方式发给您</view > -->
		</view>
		<view class="flex flex-direction justify-center align-center check-box" v-if="info.joinin_state == 3" >
		  <text class=" text-bold"> {{i18n['审核失败']}}</text>
		</view>
        <view class="flex flex-direction justify-center align-center check-box" v-if="info.joinin_state == 4">
          <text class=""> {{i18n['待财务审核']}}</text>
        </view>
		<view class="flex flex-direction justify-center align-center check-box" v-if="info.joinin_state == 5">
		 <text  class=""> {{i18n['审核通过']}}</text>
		 <view class="text-666" style="font-size: 24rpx;margin-top: 24rpx;width: 524rpx;">{{info.msg}}</view >
		</view>
		<view class="flex flex-direction justify-center align-center check-box" v-if="info.joinin_state == 6">
		<text class="text-333"> {{i18n['审核失败']}}</text>
		</view>
      </view>
      <!-- <view class="text-666 margin-top-xs" v-if="info.joinin_state == 1 || info.joinin_state == 4 ">信息审核中，请稍等~</view>
      <view class="text-666 margin-top-xs" v-if="info.joinin_state == 3 || info.joinin_state == 6 ">信息审核失败，请重试~</view> -->
     <view class="btn-wrap flex justify-center margin-top" v-if="info.joinin_state == 2 || info.joinin_state == 6">
        <view class="btn" @click="handlerPay"> {{i18n['去支付']}}</view>
      </view>
      <view class="btn-wrap flex justify-center margin-top" v-if="info.joinin_state == 3">
        <view class="btn" @click="handlerAddInfo">重新提交</view>
      </view>
<!--      <view class="lex justify-center margin-top" v-if="info.joinin_state == 5">
        <view class="btn finish" @click="handlerLogin">请前往下载商家端app</view>
      </view> -->
    </view>
   <view class="margin-tb-sm" v-if="info.joinin_state == 3 || info.joinin_state == 6 ">
      <!-- <view class="padding-lr padding-tb-sm margin-top-sm text-df text-666">
        {{i18n['审核信息']}}
      </view> -->
      <view class="bg-white radius-16  padding text-df">
        <view class="_left" style='margin-bottom: 10rpx'>
          {{i18n['拒绝理由']}}
        </view>
        <view class="_right   ">
          {{info.reason? info.reason:i18n['无']}}
        </view>
      </view>
    </view>
   
    <!-- <view class="padding-lr padding-tb-sm text-df text-666">
      {{info.person.length>0?'个人信息':'公司信息'}}
    </view> -->
	<view class="">
	  <view class="shop-item solid-bottom bg-white  padding-lr text-df flex justify-between align-center"
	    v-for="item in info.store" :key="item.name" style="padding: 30rpx;">
	    <view class="_left">
	      {{item.name}}
	    </view>
	    <view class="_right  text-right" :class="{'image':item.img}">
	      <block v-if="item.val">
	        {{item.val}}
	      </block>
	      <image v-else class="img radius-8" :src="item.img" mode="heightFix" @click="preview(item.img)"></image>
	    </view>
	  </view>
	</view>
    <view class="margin-top-20">
      <view class="shop-item bg-white  padding-lr text-df flex justify-between align-center"
        v-for="item in info.person" :key="item.name">
        <view class="_left">
          {{item.name}}
        </view>
        <view class="_right   text-right" :class="{'image':item.img}">
          <block v-if="item.val">
            {{item.val}}
          </block>
          <image class="img" v-else :src="item.img" mode="heightFix" @click="preview(item.img)"></image>
        </view>
      </view>
      <view class="shop-item bg-white  padding-lr text-df flex justify-between align-center solid-bottom"
        v-for="item in info.company" :key="item.name" style="padding: 30rpx;">
        <view class="_left">
          {{item.name}}
        </view>
        <view class="_right  text-right" :class="{'image':item.img}">

          <block v-if="item.val">
            {{item.val}}
          </block>
          <image class="img" v-else :src="item.img" mode="heightFix" @click="preview(item.img)"></image>
        </view>
      </view>
	  <view class="shop-item bg-white height-100 padding-lr text-df flex justify-between align-center solid-bottom"
	    v-for="item in info.licence" :key="item.name">
	    <view class="_left">
	      {{item.name}}
	    </view>
	    <view class="_right  text-right" :class="{'image':item.img}">

	      <block v-if="item.val">
	        {{item.val}}
	      </block>
	      <image class="img" v-else :src="item.img" mode="heightFix" @click="preview(item.img)"></image>
	    </view>
	  </view>
	  <view class="shop-items bg-white height-100 padding-lr text-df flex justify-between align-center solid-bottom"
	    v-for="item in info.business_qualification" :key="item.name">
	    <view class="_left">
	      {{item.name}}
	    </view>
	    <view class="_right  text-right" :class="{'image':item.img}">
		 <block v-for="(el,index) in item.img">
			 <view class="img_box">
			 	<image class="img" :src="el" mode="heightFix" @click="preview(el)"></image>
			 </view>
	    </block>
		</view>
	  </view>
    </view>
    <view class="padding-lr padding-tb-sm margin-top-sm text-df text-666" v-if="info.pay.length > 0 ">
      {{i18n['支付信息']}}
    </view>
    <view class=" radius-16">
      <view class="shop-item bg-white  padding-lr text-df flex justify-between align-center "
        v-for="item in info.pay" :key="item.name" style="padding: 30rpx;">
        <view class="_left">
          {{item.name}}
        </view>
        <view class="_right   text-right" :class="{'image':item.img}">
          <block v-if="item.val">
            {{item.val}}
          </block>
          <image v-else class="img" :src="item.img" mode="heightFix" @click="preview(item.img)"></image>
        </view>
      </view>
    </view>
    <!-- <view class="padding-lr padding-tb-sm margin-top-sm text-df text-666" v-if="info.apply_type!==3">
      {{i18n['银行信息']}}
    </view> -->
    <!-- <view class="">
      <view class="shop-item bg-white  padding-lr text-df flex justify-between align-center"
        v-for="item in info.settlement" :key="item.name" style="padding: 30rpx;">
        <view class="_left">
          {{item.name}}
        </view>
        <view class="_right  text-right" :class="{'image':item.img}">

          <block v-if="item.val">
            {{item.val}}
          </block>
          <image v-else class="img" :src="item.img" mode="heightFix" @click="preview(item.img)"></image>
        </view>
      </view>
    </view> -->
    <!-- <view class="padding-lr padding-tb-sm margin-top-sm text-df text-666">
      {{i18n['店铺信息']}}
    </view> -->
  </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        info: {
          pay: [],
          company: [],
          person: [],
          licence: '',
          settlement: [],
          store: [],
          reason: '',
        }
      }
    },
    onShow() {
      this.getData();
    },
    onLoad(option) {

      // let pages = getCurrentPages();
      // let prevPage = pages[pages.length - 2]; //上一个页面
      // console.log(JSON.stringify(pages),JSON.stringify(prevPage))
    },
    onPullDownRefresh() {
      this.getData();
      uni.stopPullDownRefresh();
    },
	/**
	 * @function
	 * @description 监听页面返回
	 * @param {Object} e - {from:backbutton、 navigateBack}
	 *  backbutton 表示来源是左上角返回按钮或 android 返回键；
	 *  navigateBack表示来源是 uni.navigateBack
	 */
	onBackPress(e) {
	  const that = this;
	  if (e.from == 'backbutton') {
	  uni.switchTab({
	  	url: '/pages/tab/my/my/index'
	  })
	  }
	},
    methods: {
      handlerLogin() {
        this.$message.info('请通过链接下载商家端app');
      },
      preview(url) {
        uni.previewImage({
          current: url,
          urls: [url]
        })
      },
      // 去支付
      handlerPay() {
        uni.navigateTo({
          url: '/pages/goods/shop/shop-pay/index'
        })
      },
      // 重填信息
      handlerAddInfo() {
        uni.navigateTo({
          url: '/pages/goods/shop/shop-agreement/index'
        })
      },
      back() {
        // uni.navigateBack()
        uni.switchTab({
        	url: '/pages/tab/my/my/index'
        })
      },
      getData() {
        let store_joinin_id = uni.getStorageSync('store_joinin_id') || 0;
        let store_user_id = uni.getStorageSync('store_user_id') || 0;
        this.$api.post(global.apiUrls.apply, {}, {
          header: {
            Storeid: store_joinin_id,
            Userid: store_user_id
          }
        }).then(res => {
          console.log(res);
          if (res.data.code == 1) {
            this.info = res.data.data;
          } else {
            this.$message.info(res.data.msg);
          }
        }).catch(err => {
          console.log(err);
        })
      }
    }
  }
</script>

<style scoped lang="scss">
  .page {
    padding-bottom: 120rpx;
  }
  .cu-bar {
    // color: white;

    background-color: #ffffff;
	min-height: 0 !important;
  }

  .check-box {
    image {
      width: 100rpx;
      height: 100rpx;
    }
  }

  .result-info {
	  width: 100%;
    padding: 24rpx 0;
	background-color: rgba(255, 111, 39, 0.1);
	color: #FF6F27;
  }

  .result-info-title {
    color: #FF6F27;
	font-size: 28rpx;
  }

  .height-100 {
    // min-height: 100rpx;
    // height: initial;
  }

  .text-bf {
    color: #bfbfbf;
  }

  .shop-item {
	  padding: 30rpx;
    ._left {
      width: 300rpx;
	  color: #666;
	  font-size: 32rpx;
	  font-weight: bold;
    }

    ._right {
      width: calc(100% - 300rpx);
      display: flex;
      align-items: center;
      justify-content: flex-end;
      text-align: right;
	  color: #333;
	  font-size: 32rpx;
	  font-weight: bold;
      &.image {
        padding: 20rpx 0;
      }

      .up-img {
        width: 320rpx;
        height: 150rpx;
        border: 1px dashed #EEEEEE;
        position: relative;

        &::before {
          content: '';
          width: 60rpx;
          height: 4rpx;
          background: #EEEEEE;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
        }

        &::after {
          content: '';
          width: 4rpx;
          height: 60rpx;
          background: #EEEEEE;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
        }
      }

      .img {
        height: 150rpx;
      }

    }
  }

  .shop-items {
	  display: flex;
	  flex-direction: column;
	  justify-content: flex-start;
	  align-items: flex-start;
    ._left {
      width: 300rpx;
    }

    ._right {
      // width: calc(100% - 300rpx);
      display: flex;
      align-items: center;
      justify-content: space-around;
      // text-align: right;
	  margin-top: 20rpx;
	  flex-wrap: wrap;

      &.image {
        padding: 20rpx 0;
      }

      .up-img {
        width: 320rpx;
        height: 150rpx;
        border: 1px dashed #EEEEEE;
        position: relative;

        &::before {
          content: '';
          width: 60rpx;
          height: 4rpx;
          background: #EEEEEE;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
        }

        &::after {
          content: '';
          width: 4rpx;
          height: 60rpx;
          background: #EEEEEE;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
        }
      }
	  .img_box{
		  width: 216rpx;
		  min-width: 216rpx;
		  height: 160rpx;
		  min-height: 160rpx;
		  display: flex;
		  justify-content: center;
		  align-items: center;
	  }

      .img {
        height: 150rpx;
		margin-left: 10rpx;
      }

    }
  }

  .btn-wrap {
    .btn {
      width: 320rpx;
      height: 64rpx;
      line-height: 64rpx;
      text-align: center;
      font-size: 28rpx;
      color: #ffffff;
      background: $bgtheme;
      border-radius: 32rpx;
    }

  }

  .finish {
    color: #1A76F2;
  }

  .custom {
    position: sticky;
    top: 0;
    width: 100%;
    left: 0;
    z-index: 9999;

  }

  .radius-16 {
    border-radius: 16rpx !important;
    overflow: hidden;
  }
</style>
